<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见光源类型</title>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <link rel="stylesheet" href="common.css">
    <style>
        .box {
            display: flex;
        }
        
        #c1,
        #c2,
        #c3,
        #c4 {
            flex: 1;
            height: 100%;
            border: 1px solid #000;
        }
    </style>
</head>

<body class="box">
    <div id="c1"> </div>
    <div id="c2"> </div>
    <div id="c3"> </div>
    <div id="c4"> </div>
</body>
<script>
    function makeScence(mesh, light, el, lightHelper) {
        var scene = new THREE.Scene();
        var material = new THREE.MeshLambertMaterial();
        var geometry = new THREE.BoxGeometry(100, 100, 100);
        var mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        // 2.【设置光源信息】

        light.position.set(50, 400, 200); //点光源位置
        light.target = mesh; //光源指向模型
        scene.add(light); // 添加光源
        scene.add(lightHelper); //添加光源辅助对象

        //3.显示
        var width = document.getElementById(el).clientWidth;
        var height = document.getElementById(el).clientHeight;
        var k = width / height; //窗口宽高比
        var s = 400; //三维场景显示范围控制系数
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); //创建相机对象
        camera.position.set(300, 400, 600); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height); //设置渲染区域尺寸
        renderer.setClearColor(0xb9d3ff, 0.3); //设置背景颜色
        document.getElementById(el).appendChild(renderer.domElement); //can1画布中插入canvas对象
        renderer.render(scene, camera); //执行渲染操作（场景、相机）

    }

    /*1.【创建光源】  
        1.1创建光源：new THREE.光源种类(颜色)
        1.2创建光源辅助对象： new THREE.光源Helper(光源，大小，颜色)
    */

    //【点光源】
    var light1 = new THREE.PointLight(0xffffff); //设置点光源
    var PointLightHelper = new THREE.PointLightHelper(light1, 50, "#ffff00"); //点光源辅助对象
    makeScence(null, light1, 'c1', PointLightHelper)

    // 【环境光】
    var light2 = new THREE.AmbientLight(0xffff00); //设置环境光
    makeScence(null, light2, 'c2')

    // 【平行光】
    var light3 = new THREE.DirectionalLight(0xffffff, 0.5); //设置平行光(颜色，光强)
    var DirectionalLightHelper = new THREE.DirectionalLightHelper(light3, 50, "#ffff00"); //平行光源辅助对象
    makeScence(null, light3, 'c3', DirectionalLightHelper)

    // 【聚光源】
    var light4 = new THREE.SpotLight(0xffffff); //设置聚光源
    light4.angle = Math.PI / 10 // 设置聚光光源发散角度
    var spotLightHelper = new THREE.SpotLightHelper(light4, "#ffff00"); //聚光源辅助对象
    makeScence(null, light4, 'c4', spotLightHelper)
</script>

</html>